<template>
  <el-aside width="260px">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#1E2F5E"
      active-text-color="#fff"
    >
      <div v-for="item in MenuList" :key="item.id">
        <el-menu-item
          :index="item.path"
          v-if="item.children.length === 0"
          @click="gotoRouterPage(item.path)"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.title }} </span>
        </el-menu-item>
        <el-submenu v-else :index="item.path">
          <template slot="title">
            <img :src="item.img" alt="" />
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="items in item.children"
            :key="items.id"
            :index="items.path"
            @click="gotoRouterPage(items.path)"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ items.title }}</span>
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Asider",
  data() {
    return {
      MenuList: [
        {
          id: 1001,
          title: "企业人员定位管理",
          path: "/qyrydwgl/qyrydwglsy",
          children: [
            {
              id: 10001,
              title: "企业人员定位管理（首页）",
              path: "/qyrydwgl/qyrydwglsy",
              parent_id: 1001,
            },
          ],
        },
        {
          id: 1002,
          title: "企业全流程综合管理",
          path:"",
          children: [
            {
              id: 11001,
              title: "目标责任",
              parent_id: 1002,
              path: "/qyqlczhgl/mbzr",
            },
            {
              id: 11002,
              title: "设备设施管理",
              parent_id: 1002,
              path: "/qyqlczhgl/sbssgl",
            },
            {
              id: 11003,
              title: "三同时管理",
              parent_id: 1002,
              path: "/qyqlczhgl/stsgl",
            },
            {
              id: 11004,
              title: "作业安全管理",
              parent_id: 1002,
              path: "/qyqlczhgl/zyaqgl",
            },
            {
              id: 11005,
              title: "变更管理",
              parent_id: 1002,
              path: "/qyqlczhgl/bggl",
            },
            {
              id: 11006,
              title: "安全生产费用管理",
              parent_id: 1002,
              path: "/qyqlczhgl/aqscfygl",
            },
          ],
        },
        {
          id: 1003,
          title: "企业双重预防管理",
          path: "/home",
          children: [
            {
              id: 12001,
              title: "双重预防管理（首页）",
              parent_id: 1003,
              path: "/qyscyfgl/scyfglsy",
            },
            {
              id: 12002,
              title: "企业风险分区综合查询",
              parent_id: 1003,
              path: "/qyscyfgl/qyfxfqzhcx",
            },
            {
              id: 12003,
              title: "企业风险分级管控",
              parent_id: 1003,
              path: "/qyscyfgl/qyfxfjgk",
            },
            {
              id: 12004,
              title: "企业隐患排查",
              parent_id: 1003,
              path: "/qyscyfgl/qyyhpc",
            },
            {
              id: 12005,
              title: "企业隐患治理",
              parent_id: 1003,
              path: "/qyscyfgl/qyyhzl",
            },
            {
              id: 12006,
              title: "企业三卡管理",
              parent_id: 1003,
              path: "/qyscyfgl/qyskgl",
            },
          ],
        },
        {
          id: 1004,
          title: "特殊作业管理",
          path: "/qyqlczhgl/tszygltj",
          children: [
            {
              id: 13001,
              title: "特殊作业管理（首页）",
              parent_id: 1004,
              path: "/qyqlczhgl/tszygltj",
            },
          ],
        }
      ],
    };
  },
  methods: {
    gotoRouterPage(path) {
      if(this.$route.path === path){
        return
      }
      this.$router.push(path);
    },
  },
};
</script>

<style scoped lang="scss">
.el-aside {
  overflow-x: hidden;
  color: #6e7ea9;
  text-align: left;
  line-height: 200px;
  height: calc(100vh - 60px);
  background-color: #1e2f5e;
}
:deep(.el-submenu__title) {
  color: #fff !important;
}

.el-menu {
  border: none;
}
.el-menu-item {
  color: #6e7ea9;
}
.el-menu-item:hover {
  background-color: rgb(83, 137, 246) !important;
}

.is-active {
  background: linear-gradient(90deg, #4166e0 0%, #558df8 100%);
}
</style>
